<template>
  <div class="bank-opening-deposit">
    <ui-form ref="bankOpningDeposit" :rules="rules" :model="form" inline label-width="110px" class="form-container">
      <div>
        <ui-form-item prop="province" class="area">
          <ui-select :popper-append-to-body="false" v-model="form.province" placeholder="选择省份" clearable>
            <ui-option v-for="province in provinces" :key="province.ProvinceCode" :label="province.ProvinceName" :value="province.ProvinceCode">
            </ui-option>
          </ui-select>
        </ui-form-item>
        <ui-form-item prop="city" class="area">
          <ui-select :popper-append-to-body="false" v-model="form.city" placeholder="选择市/县" clearable>
            <ui-option v-for="city in icitys" :key="city.CityCode" :label="city.CityName" :value="city.CityCode"> </ui-option>
          </ui-select>
        </ui-form-item>
      </div>
      <ui-form-item prop="keyword" class="keyword">
        <ui-input v-model="form.keyword" placeholder="关键字"></ui-input>
      </ui-form-item>
      <ui-form-item class="submit">
        <ui-button class="default-btn" @click="reset">重置</ui-button>
        <ui-button class="primary-btn" @click="searchCall">查询</ui-button>
      </ui-form-item>
    </ui-form>
    <ui-table v-loading="isLoading" :data="tableList" style="width: 100%" highlight-current-row @current-change="selectItem">
      <ui-table-column label="选择" width="200">
        <template slot-scope="scope">
          <ui-radio :label="scope.row.code" v-model="selectedItemCode"><span></span></ui-radio>
        </template>
      </ui-table-column>
      <ui-table-column prop="value" label="开户网点" width="420"> </ui-table-column>
      <ui-table-column prop="code" label="银行卡号" width="305"> </ui-table-column>
    </ui-table>
    <ui-pagination
      :total="pagination.total"
      :page-size="pageSize"
      :current-page="currentPage"
      :layout="layout"
      :page-sizes="pageSizeList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></ui-pagination>
  </div>
</template>

<script>
import transferRemitApi from '@/api/transferRemit';
import componentsApi from '@/api/components.js';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
export default {
  name: 'bankOpeningDeposit',
  mixins: [pagination],
  data() {
    return {
      timer: '',
      isLoading: false,
      form: {
        province: '',
        city: '',
        keyword: '',
      },
      pagination: {
        total: 0,
      },
      selectedItemCode: '',
      tableList: [],
      rules: {},
      provinces: [],
    };
  },
  async created() {
    // 加载省市数据
    try {
      this.isLoading = true;
      let res = await componentsApi.getProvinceQry();
      this.provinces = res.list;
      this.searchList();
    } catch (err) {
      this.$message.error(err.message);
    } finally {
      this.isLoading = false;
    }
  },
  computed: {
    // 联动省-市
    icitys() {
      if (!this.form.province) {
        return [];
      }
      return this.provinces.find((province) => {
        return province.ProvinceCode == this.form.province;
      }).ProvinceList;
    },
  },
  methods: {
    // 选中行
    selectItem(item) {
      if (item) {
        this.selectedItemCode = item.code;
        // 停顿效果
        this.timer = setTimeout(
          function() {
            // 通知选中
            this.$emit('bankOpeningDepositSelected', item);
          }.bind(this),
          500,
        );
      } else {
        this.selectedItemCode = '';
      }
    },
    // 重置查询条件
    reset() {
      this.$refs.bankOpningDeposit.resetFields();
      this.searchList();
    },
    async searchList() {
      this.selectedItemCode = '';
      try {
        this.isLoading = true;
        let res = await transferRemitApi.searchOpeningOutlets({
          pageSize: this.pageSize, // 一次多少个
          currentPage: this.currentPage, // 第几页
          ...this.form,
        });
        this.pagination.total = res.list.length;
        this.tableList = res.list;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isLoading = false;
      }
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>
<style lang="scss">
.bank-opening-deposit {
  margin-top: 35px;
  .form-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .area {
    width: 145px;
  }
  .keyword {
    width: 300px;
    .ui-form-item__content {
      width: 100%;
    }
  }
  .submit {
    margin-right: 0;
  }
}
</style>
